body{
  transform-style: preserve-3d;
  perspective: 5000px;
  background-color: rgb(14, 109, 2);
}
.card{
  width: 30%;
  min-width: 300px;
  height: 60%;
  /* height: 500px; */
  background-color: rgba(47, 245, 143, 0.8);
  border-radius: 20px;
  /* padding: 5%; */
  text-align: center;
  position: fixed;
  right: 4%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate3d(var(--x),var(--y),0,5deg);
  transition: .5s;
  transform-style: preserve-3d;
  perspective: 5000px;
  filter: blur(10);
  text-align: right;
}
.row{
  cursor: pointer;
  width: 80%;
  height: 20%;
  /* box-shadow: 3px 3px 50px black; */
  margin-bottom: 10px;
  background: linear-gradient(to right ,rgba(0, 128, 0, 0.103) 50%,red 50%) no-repeat;
  /* background-size:inherit; */
  background-size: 120%;
  background-position: -500px 0%;
  background-color: darkgreen;
  transition: .4s;
  border-radius: 10px;
  transform: translate3d(0,0,50px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
  font-size: 50px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.one:hover, .two:hover{
  background-position: -115px 0%;
  letter-spacing: 10px;
}
.two{
  background-color: rgb(7, 93, 169);
}
.three{
  /* margin-top: 100px; */
  background-color: rgb(144, 8, 156);
  border-radius: 50px;
  transition: .5s;
  filter: url(#noise);
  position: relative;
}
.three:hover{
  background-color: #1768cb;
  transform: scale(1.1) translateZ(50px);
}
.three:hover .play{
  background-color: #d7d7da;
}
.play{
  width: 50px;
  height: 50px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: #fff;
}
.content{
  /* width: inherit; */
  align-self: flex-start;
  position: absolute;
  top: 0%;
  padding: 4%;
  color: black;
}